

<div class="page-title">
    <img src="svg_img/system_black.svg">
    <h1 data-trans="alist"></h1>
</div>
<div id="innerContainer">
    <div class="limit-container">
        <div class="row form-group">
            <!-- 修改后的按钮开始 -->
            <div class="col-8 col-md-4 col-sm-6 side-right">
                AList开关
            </div>
            <div class="col-3 form-switch">
                <input class="form-check-input" type="checkbox" name="alistStatusSwitch" id="alistStatusSwitch" data-bind="checked : alistStatusSwitch, click: setAlistStatusSwitch">
            </div>
            <!-- 修改后的按钮结束 -->
        </div>
        <div class="form-buttons">
            <input type="submit" class="btn btn-primary" value="应用" id="applyButton">
        </div>


            <div class="form-note">
                <div class="notes-title">&nbsp;</div>
                <ul class="notes-content">
                    <li data-trans="alist_note"></li>
                </ul>
            </div>        
    </div>
    <div class="limit-container">
            <!-- 日志显示区域 -->
            <div class="col-8 col-md-4 col-sm-6 side-right">
                日志
            </div>
            <div class="J_content" id="logContainer" style="padding: 10px; height: 40vh; overflow-y: auto; font-family: monospace; font-size: 14px; white-space: pre-wrap;">
                正在加载日志...
            </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 获取AList状态
    function getAListStatus() {
        return $.get("/atwat/alist/status").then(function(data) {
            return data.trim();
        });
    }
    
    // 获取AList日志
    function getAListLog(scrollToBottom) {
        return $.get("/atwat/alist/log").then(function(data) {
            // 处理ANSI颜色码
            var logHtml = data.replace(/\[([0-9]+m)/g, function(match, colorCode) {
                // 定义颜色映射
                switch(colorCode) {
                    case '30m': return '<span style="color: black;">'; // 黑色
                    case '31m': return '<span style="color: red;">'; // 红色
                    case '32m': return '<span style="color: green;">'; // 绿色
                    case '33m': return '<span style="color: orange;">'; // 黄色
                    case '34m': return '<span style="color: blue;">'; // 蓝色
                    case '35m': return '<span style="color: purple;">'; // 紫色
                    case '36m': return '<span style="color: cyan;">'; // 青色
                    case '37m': return '<span style="color: white;">'; // 白色
                    case '0m': return '</span>'; // 重置
                    default: return match; // 其他颜色码保持原样
                }
            });
            
            $("#logContainer").html(logHtml);
            
            // 如果需要滚动到底部，则执行滚动
            if (scrollToBottom) {
                var logContainer = document.getElementById('logContainer');
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        });
    }
    
    // 开关状态改变事件
    $("#alistStatusSwitch").change(function() {
        var status = $(this).prop("checked") ? "1" : "0";
        
        if (status === "1") {
            // 启动AList
            $.post("/atwat/alist/start").then(function() {
                getAListLog(false); // 刷新日志但不滚动到底部
            }).fail(function() {
                // alert("启动AList失败");
                // 如果启动失败，恢复开关状态
                $("#alistStatusSwitch").prop("checked", false);
            });
        } else {
            // 停止AList
            $.post("/atwat/alist/stop").then(function() {
                getAListLog(false); // 刷新日志但不滚动到底部
            }).fail(function() {
                // alert("停止AList失败");
                // 如果停止失败，恢复开关状态
                $("#alistStatusSwitch").prop("checked", true);
            });
        }
    });
    
    // 初始化页面
    getAListStatus().then(function(status) {
        if (status === "running") {
            $("#alistStatusSwitch").prop("checked", true);
        } else {
            $("#alistStatusSwitch").prop("checked", false);
        }
    }).fail(function() {
        // alert("获取AList状态失败");
    });
    
    // 初始加载日志并滚动到底部
    getAListLog(true);
    
    // 每3秒刷新一次日志
    setInterval(function() {
        getAListLog(false);
    }, 3000);
    
    // 移除应用按钮的点击事件
    $("#applyButton").remove();
});
</script>